<template>
  <div>
    <br />
    <a-row>
      <a-col span="2">MD5</a-col>
      <a-col span="22">
        <a-button
          class="btn"
          type="primary"
          size="small"
          @click="md5PopClick('md5')"
        >
          MD5
        </a-button>
        <a-button
          class="btn"
          type="primary"
          size="small"
          @click="md5PopClick('sha1')"
        >
          sha1
        </a-button>
        <a-button
          class="btn"
          type="primary"
          size="small"
          @click="md5PopClick('sha256')"
        >
          sha256
        </a-button>
        <a-button
          class="btn"
          type="primary"
          size="small"
          @click="md5PopClick('sha512')"
        >
          sha512
        </a-button>
      </a-col>
    </a-row>
    <!--提示框-->
    <w-modal 
      ref="WModal"
      :title="form.type"
      :ok-text="form.data ? '清 除' : '确 定'"
      :ok-type="form.data ? 'danger' : 'primary'"
      @ok="md5OkBtnClick"
    >
      <a-input
        v-model="form.value"
        type="textarea"
        placeholder="请输入..."
      ></a-input>
      <br /><br />
      <p
        v-if="form.data"
        class="w-text-warp w-hover-text w-pointer"
        @click="$wCopy(form.data)"
      >
        {{ form.data }}
      </p>
    </w-modal>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Api } from '@/config/api'
import WModal, { ModalComType } from '@/components/global/modal'

@Component({
  name: 'WebToolCryptoMd5',
  components: {
    WModal
  },
})
export default class WebToolCryptoMd5 extends Vue {
  form = {
    type: '',
    value: '',
    data: ''
  }

  md5PopClick (type:any) {
    this.form.value = ''
    this.form.data = ''
    this.form.type = type;
    (this.$refs.WModal as ModalComType).show()
  }

  md5OkBtnClick () {
    if (this.form.data) {
      this.form.value = ''
      this.form.data = ''
      return
    }
    (this.$refs.WModal as ModalComType).showLoading()
    this.$wAxios
      .$post(Api.coding.md5, {
        type: this.form.type,
        input: this.form.value
      })
      .then((data) => {
        this.form.data = data
      })
      .catch(() => {})
      .finally(() => {
        (this.$refs.WModal as ModalComType).hideLoading()
      })
  }
}
</script>

<style scoped></style>
